import { useState } from 'react';
import { useTheme } from '@/hooks/useTheme';
import { Bookmark, Heart, MessageCircle, Share2, Search, ArrowLeft, Filter, Clock, Award, Book, Zap } from 'lucide-react';
import { toast } from 'sonner';
import { useNavigate } from 'react-router-dom';

// 定义健身知识点类型
interface FitnessKnowledge {
  id: string;
  title: string;
  category: string;
  author: string;
  authorAvatar: string;
  publishDate: string;
  readTime: string;
  likes: number;
  comments: number;
  content: string;
  keyPoints: string[];
  coverImage: string;
  isSaved: boolean;
  isLiked: boolean;
}

// 健身核心知识点数据
const fitnessKnowledgeData: FitnessKnowledge[] = [
  {
    id: '1',
    title: '如何正确进行深蹲训练',
    category: '力量训练',
    author: '张教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=fitness%20coach%20male%20avatar&sign=92c80738e1032ab68dfffce9c5d05afe',
    publishDate: '2025-09-20',
    readTime: '8分钟',
    likes: 1245,
    comments: 89,
    content: '深蹲是健身中最基础也最有效的复合动作之一，正确的深蹲姿势不仅能锻炼下肢肌肉群，还能增强核心稳定性。错误的深蹲姿势可能导致膝盖和腰部受伤，因此掌握正确的动作要领至关重要。',
    keyPoints: [
      '双脚与肩同宽或略宽，脚尖微微外展',
      '保持背部挺直，核心收紧',
      '下蹲时膝盖与脚尖方向一致',
      '下蹲深度以大腿与地面平行为宜',
      '站起时用脚后跟发力，避免膝盖内扣'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=correct%20squat%20form%20guide%20in%20gym&sign=024bfc0eed66ba53091feeaa21c03482',
    isSaved: false,
    isLiked: false
  },
  {
    id: '2',
    title: '健身后如何科学补充营养',
    category: '营养指导',
    author: '李营养师',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=nutritionist%20female%20avatar&sign=c7ce132681779b2bd7a8e263cde98dfd',
    publishDate: '2025-09-18',
    readTime: '6分钟',
    likes: 987,
    comments: 67,
    content: '训练后的营养补充是肌肉修复和生长的关键时期。在训练结束后的30-60分钟内，身体对营养物质的吸收效率最高，这个时间段被称为"黄金窗口期"。合理的营养补充可以加速恢复，提高训练效果。',
    keyPoints: [
      '训练后30-60分钟内补充蛋白质和碳水化合物',
      '蛋白质摄入量为0.25-0.4g/kg体重',
      '碳水与蛋白质的比例建议为3:1或4:1',
      '适量补充水分和电解质',
      '避免摄入过多脂肪，以免影响吸收速度'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=post-workout%20nutrition%20meal%20protein%20shake&sign=913a46ebe36e65996a98950e0ef8936b',
    isSaved: true,
    isLiked: false
  },
  {
    id: '3',
    title: '新手如何制定健身计划',
    category: '训练计划',
    author: '王教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=fitness%20trainer%20male%20avatar&sign=2ac39982d9b6c14a6313e9d70cd4164e',
    publishDate: '2025-09-15',
    readTime: '10分钟',
    likes: 2134,
    comments: 128,
    content: '对于健身新手来说，制定一个科学合理的训练计划至关重要。一个好的计划应该考虑到训练频率、训练强度、训练时间和训练类型等多个因素，同时还要结合个人的健身目标和身体状况。',
    keyPoints: [
      '每周训练3-4天，给身体充分恢复时间',
      '从基础动作开始，掌握正确的动作要领',
      '每个肌群训练2-3个动作，每个动作3-4组',
      '逐渐增加训练重量或次数，实施渐进超负荷',
      '结合有氧训练和力量训练，全面提升体能'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=beginner%20workout%20plan%20fitness%20calendar&sign=26050a62d5eaaa064a11daf06ba09130',
    isSaved: false,
    isLiked: true
  },
  {
    id: '4',
    title: '如何有效减少腹部脂肪',
    category: '减脂塑形',
    author: '赵教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=fitness%20instructor%20female%20avatar&sign=2b1fc0c6dce5a00e386660ece91edc4a',
    publishDate: '2025-09-12',
    readTime: '7分钟',
    likes: 1876,
    comments: 95,
    content: '腹部脂肪是很多健身爱好者面临的问题，尤其是内脏脂肪对健康危害更大。要有效减少腹部脂肪，需要结合科学的饮食、针对性的训练和良好的生活习惯，单纯的腹部训练是不够的。',
    keyPoints: [
      '创造热量缺口，保证每日热量摄入小于消耗',
      '增加蛋白质摄入，保持肌肉量',
      '结合有氧运动和力量训练，提高代谢',
      '保证充足的睡眠，避免压力过大',
      '减少精制碳水和添加糖的摄入'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=abdominal%20fat%20loss%20workout%20exercises&sign=ff0c192dab45211edbb0cec31173481b',
    isSaved: false,
    isLiked: false
  },
  {
    id: '5',
    title: '健身中的休息与恢复策略',
    category: '训练恢复',
    author: '陈教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=fitness%20coach%20male%20avatar%20asian&sign=1d7e13a9ebab476008eea409f4b4fe6f',
    publishDate: '2025-09-10',
    readTime: '5分钟',
    likes: 1054,
    comments: 56,
    content: '休息与恢复是健身过程中常被忽视的重要环节。肌肉是在休息时生长的，而不是在训练时。合理的休息策略可以加速肌肉修复，提高训练效果，预防过度训练和受伤。',
    keyPoints: [
      '每个训练部位需要48-72小时的恢复时间',
      '保证每晚7-9小时的优质睡眠',
      '训练后进行适当的拉伸和放松',
      '合理安排休息日，避免连续高强度训练',
      '注意营养补充，为身体提供修复材料'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=muscle%20recovery%20sleep%20nutrition%20rest&sign=4a43c0af874b333cd2f88e3dc2cdbc92',
    isSaved: true,
    isLiked: false
  },
  {
    id: '6',
    title: '健身装备与器材选择指南',
    category: '装备指南',
    author: '刘教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=fitness%20equipment%20expert%20male&sign=69ed7a9a6fb37c05d59050f9cd72b7be',
    publishDate: '2025-09-08',
    readTime: '9分钟',
    likes: 1352,
    comments: 78,
    content: '选择合适的健身装备和器材对于训练效果和安全性至关重要。从基础的运动服装到专业的训练器械，了解如何选择适合自己的装备能让你的健身之旅更加舒适和有效。',
    keyPoints: [
      '选择透气、弹性好的运动服装',
      '根据运动类型选择合适的运动鞋',
      '力量训练时考虑使用护具保护关节',
      '家庭健身器材选择要考虑空间和需求',
      '新手建议从基础器材开始，逐渐升级'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fitness%20equipment%20guide%20workout%20gear&sign=39b7112f3a97a37f2c98b441770ca686',
    isSaved: false,
    isLiked: false
  },
  {
    id: '7',
    title: '女性健身的特殊考虑与建议',
    category: '特殊人群',
    author: '孙教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=fitness%20trainer%20female%20expert&sign=0ca384b6cf2c4ea283b22da36c90e0a3',
    publishDate: '2025-09-06',
    readTime: '8分钟',
    likes: 1763,
    comments: 112,
    content: '女性在生理结构、激素水平等方面与男性存在差异，因此在健身训练中需要特别考虑一些因素。了解这些差异并针对性地调整训练计划，能帮助女性健身者更安全、更有效地达成健身目标。',
    keyPoints: [
      '了解女性生理周期对训练的影响',
      '力量训练不会让女性过度男性化',
      '关注核心和盆底肌训练的重要性',
      '孕期和产后的特殊训练考虑',
      '激素水平变化与训练计划调整'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=women%20fitness%20workout%20special%20considerations&sign=617597a81fb72fa05188e7fe5ed1fa67',
    isSaved: false,
    isLiked: true
  },
  {
    id: '8',
    title: '中老年人健身指南',
    category: '特殊人群',
    author: '杨医生',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=senior%20health%20expert%20male&sign=d297abe0482df6b075b670ba97d397a9',
    publishDate: '2025-09-04',
    readTime: '10分钟',
    likes: 987,
    comments: 65,
    content: '随着年龄的增长，身体机能逐渐下降，但适当的运动和健身仍然非常重要。中老年人健身需要特别注意安全性和适应性，选择适合自己身体状况的运动方式，循序渐进地进行锻炼。',
    keyPoints: [
      '健身前进行全面的健康检查',
      '选择低冲击、关节友好的运动',
      '注重平衡和柔韧性训练，预防跌倒',
      '适当的力量训练有助于保持肌肉量',
      '根据身体反应调整训练强度和频率'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=senior%20people%20fitness%20exercise%20guide&sign=675a1280e5cbfbe6765330f32bf20972',
    isSaved: true,
    isLiked: false
  },
  {
    id: '9',
    title: '健身中的常见误区与纠正',
    category: '知识普及',
    author: '周教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=fitness%20coach%20male%20knowledgeable&sign=3184a5339d768b48c6f8ca61a5d7f5dd',
    publishDate: '2025-09-02',
    readTime: '7分钟',
    likes: 2045,
    comments: 143,
    content: '健身领域存在许多误区和误解，这些错误观念可能会影响训练效果，甚至导致受伤。了解并纠正这些常见误区，能帮助你更科学地进行健身训练，避免走弯路。',
    keyPoints: [
      '局部减脂是不可能的，需要全身减脂',
      '肌肉酸痛不一定意味着训练有效',
      '大重量训练不一定比小重量训练效果更好',
      '有氧运动不是唯一的减脂方法',
      '营养补充剂不能替代均衡饮食'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fitness%20myths%20and%20facts&sign=50851ee57934bc81b5f9ead241fb35e8',
    isSaved: false,
    isLiked: false
  },
  {
    id: '10',
    title: '健身与心理健康的关系',
    category: '心理指导',
    author: '吴心理咨询师',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=mental%20health%20counselor%20female&sign=e2b278afe7a7ada497f4878212b5dc18',
    publishDate: '2025-08-30',
    readTime: '6分钟',
    likes: 1567,
    comments: 89,
    content: '健身不仅能改变身体，还能影响心理状态。科学研究表明，规律的运动能有效缓解压力、焦虑和抑郁情绪，提高自信心和幸福感。了解健身与心理健康的关系，能帮助你更全面地享受健身带来的益处。',
    keyPoints: [
      '运动能促进内啡肽分泌，改善情绪',
      '规律健身能提高自尊心和自信心',
      '团体运动有助于增强社交连接',
      '设定合理健身目标有助于培养成就感',
      '过度训练可能导致心理压力，需注意平衡'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=mental%20health%20and%20fitness%20connection&sign=b50372d0df21ef584a38229206124256',
    isSaved: false,
    isLiked: false
  },
  {
    id: '11',
    title: '健身补剂的正确使用指南',
    category: '营养指导',
    author: '郑营养师',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=sports%20nutritionist%20male%20expert&sign=4518c0f87c0a4269a91be20fd0e35460',
    publishDate: '2025-08-28',
    readTime: '8分钟',
    likes: 1876,
    comments: 102,
    content: '健身补剂在现代健身中扮演着重要角色，但很多人对补剂的使用存在误解。了解不同补剂的作用、适用人群和正确使用方法，能帮助你更明智地选择和使用补剂，提高训练效果。',
    keyPoints: [
      '乳清蛋白粉是最基础、最安全的补剂',
      '肌酸是科学证明有效的力量提升补剂',
      'BCAA有助于缓解肌肉疲劳',
      '维生素D和Omega-3脂肪酸对健康至关重要',
      '补剂不能替代均衡饮食，只是补充'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fitness%20supplements%20guide%20correct%20usage&sign=8c996ce7d48bd951dad2dc62f2b94a1e',
    isSaved: true,
    isLiked: false
  },
  {
    id: '12',
    title: '拉伸与柔韧性训练的重要性',
    category: '训练技巧',
    author: '林教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=flexibility%20trainer%20female&sign=fe453dda80b47a922d15161a3cce3674',
    publishDate: '2025-08-26',
    readTime: '6分钟',
    likes: 1234,
    comments: 76,
    content: '拉伸和柔韧性训练常常被健身者忽视，但它们对改善运动表现、预防受伤和促进恢复至关重要。无论是力量训练还是有氧运动，适当的拉伸都能帮助你获得更好的训练效果。',
    keyPoints: [
      '训练前进行动态拉伸，训练后进行静态拉伸',
      '每天花10-15分钟进行专门的柔韧性训练',
      '瑜伽和普拉提是提升柔韧性的有效方式',
      '拉伸时避免疼痛，保持舒适的拉伸感',
      '柔韧性改善需要坚持，不要急于求成'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=stretching%20exercises%20flexibility%20training&sign=f22382aa1e67fa3262e60917bed94d1b',
    isSaved: false,
    isLiked: false
  },
  {
    id: '13',
    title: '不同运动项目的健身价值比较',
    category: '知识普及',
    author: '何教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=sports%20science%20expert%20male&sign=1030b2ce82722d8ac4cf7529182603ae',
    publishDate: '2025-08-24',
    readTime: '9分钟',
    likes: 1654,
    comments: 98,
    content: '不同的运动项目对身体的锻炼效果和益处各不相同。了解各种运动的特点和健身价值，能帮助你根据自己的目标和兴趣选择最适合的运动方式，制定多样化的训练计划。',
    keyPoints: [
      '游泳是低冲击、全身性的理想运动',
      '跑步能有效提高心肺功能和燃烧脂肪',
      '力量训练是增肌和提高基础代谢的关键',
      '瑜伽和普拉提有助于改善柔韧性和姿势',
      '团队运动能提高社交能力和运动乐趣'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=different%20types%20of%20exercise%20fitness%20value&sign=d6c3f2c4e6e172341be38476aaad8e3d',
    isSaved: false,
    isLiked: true
  },
   {
     id: '15',
     title: '健身的本质是投资自己',
     category: '哲学',
     author: '哲思教练',
     authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=philosopher%20male%20avatar&sign=ccbf7cdea04dab8e9b94c8ea474d10cd',
     publishDate: '2025-10-01',
     readTime: '7分钟',
     likes: 876,
     comments: 42,
     content: '健身不仅仅是锻炼身体，更是对自我价值的投资。在这个快节奏的时代，健康的身体和强大的心灵是应对一切挑战的基础。通过健身，我们投资的是未来的健康、自信和生活质量。',
     keyPoints: [
       '健身是最有价值的自我投资方式之一',
       '健康是1，其他都是0',
       '身体是灵魂的容器，需要精心呵护',
       '自律带来自由，健身培养意志力',
       '长期坚持健身能带来复利效应'
     ],
     coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fitness%20philosophy%20self-investment%20concept&sign=00d0d5ed7e0302fd5dec180f56d7ee02',
     isSaved: false,
     isLiked: false
   },
   {
     id: '16',
     title: '在未来的经济存量时代，健身保持完美形象是未来时代的必然趋势',
     category: '哲学',
     author: '趋势分析师',
     authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=economic%20analyst%20male%20avatar&sign=d794cd610d211b0bb0dd0ff6eab82734',
     publishDate: '2025-10-05',
     readTime: '9分钟',
     likes: 1043,
     comments: 67,
     content: '随着经济进入存量时代，个人形象和健康成为新的竞争优势。在资源有限的环境中，拥有健康的身体和良好的形象不仅能提高工作效率，还能增强个人魅力和竞争力，成为未来社会不可或缺的软实力。',
     keyPoints: [
       '存量时代，健康成为核心竞争力',
       '良好形象是个人品牌的重要组成部分',
       '健身是对抗年龄焦虑的有效方式',
       '健康身体提高工作效率和创造力',
       '健身投资回报率随时间递增'
     ],
     coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=future%20economic%20trend%20fitness%20importance&sign=820e5e057571600674bcf0730d9c0840',
     isSaved: false,
     isLiked: false
   },
   {
    id: '14',
    title: '家庭健身方案：无需器械也能高效训练',
    category: '训练计划',
    author: '马教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=home%20workout%20trainer%20male&sign=e3dc66a829a566e3aaaf1713c70deb76',
    publishDate: '2025-08-22',
    readTime: '8分钟',
    likes: 2109,
    comments: 156,
    content: '没有健身房器械和专业设备，在家也能进行高效的健身训练。掌握一些利用自身体重和简单道具的训练方法，能帮助你随时随地保持健身习惯，即使在忙碌的生活中也能坚持锻炼。',
    keyPoints: [
      '俯卧撑是经典的上肢和核心训练动作',
      '深蹲和箭步蹲能有效锻炼下肢肌群',
      '平板支撑及其变式是核心训练的基础',
      '利用椅子、水瓶等家庭物品增加训练难度',
      '短时间高强度间歇训练在家也能高效燃脂'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=home%20workout%20no%20equipment%20needed&sign=c724f048a6daa46f094babb39d3233dc',
    isSaved: false,
    isLiked: false
   },
  {
    id: '17',
    title: '如何渐进式的安排力量训练',
    category: '力量训练',
    author: '张教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=fitness%20coach%20male%20avatar&sign=92c80738e1032ab68dfffce9c5d05afe',
    publishDate: '2025-10-15',
    readTime: '9分钟',
    likes: 756,
    comments: 53,
    content: '渐进式安排力量训练是健身进步的核心原则，通过科学地增加训练负荷，刺激肌肉持续生长和力量提升。本文将详细介绍如何设计合理的渐进方案，避免平台期和受伤风险。',
    keyPoints: [
      '渐进超负荷是肌肉生长的核心刺激因素',
      '四种有效负荷递增方式：重量、次数、组数和密度',
      '合理安排训练频率和恢复时间',
      '如何识别和突破训练平台期',
      '不同训练阶段的渐进策略调整'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=progressive%20strength%20training%20program%20design&sign=6df329f9b2b3bf542b92bae9de03908e',
    isSaved: false,
    isLiked: false
  },
  {
    id: '18',
    title: '新手的二分化训练如何安排',
    category: '力量训练',
    author: '王教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=fitness%20trainer%20male%20avatar&sign=2ac39982d9b6c14a6313e9d70cd4164e',
    publishDate: '2025-10-18',
    readTime: '10分钟',
    likes: 689,
    comments: 47,
    content: '二分化训练是新手最理想的训练分割方式之一，将全身肌群分为上下身或推拉两个部分进行训练。本文将详细介绍适合新手的二分化训练计划，包括动作选择、组数次数安排和训练频率。',
    keyPoints: [
      '二分化训练的两种经典模式：上下身分割和推拉分割',
      '每周3-4天的理想训练频率安排',
      '每个部位必练的2-3个核心动作',
      '适合新手的重量选择和组数次数建议',
      '二分化训练的进阶方向和周期调整'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=beginner%20two-split%20workout%20routine&sign=8d8a99a94ac174c5d72e7b8c0ff4b4f4',
    isSaved: false,
    isLiked: false
  },
  {
    id: '19',
    title: '薄肌锻炼小技巧',
    category: '力量训练',
    author: '李教练',
    authorAvatar: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=fitness%20instructor%20female%20avatar&sign=2b1fc0c6dce5a00e386660ece91edc4a',
    publishDate: '2025-10-20',
    readTime: '8分钟',
    likes: 723,
    comments: 51,
    content: '对于体质较瘦、难以增肌的"薄肌"人群，需要特殊的训练和饮食策略。本文将分享针对薄肌人群的锻炼小技巧，帮助突破遗传限制，有效增加肌肉量和力量。',
    keyPoints: [
      '薄肌人群的训练频率和容量调整策略',
      '复合动作为主、孤立动作为辅的训练组合',
      '优化增肌效果的"渐进式超负荷"实施方法',
      '薄肌人群的营养补充重点和饮食建议',
      '突破平台期的心理调适和训练调整技巧'
    ],
    coverImage: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=skinny%20guy%20muscle%20building%20tips&sign=6933ef8717b51a64946588be79a31467',
    isSaved: false,
    isLiked: false
  }
];

export default function FitnessKnowledgeShare() {
  const { theme } = useTheme();
  const [searchTerm, setSearchTerm] = useState('');
const [activeCategory, setActiveCategory] = useState('力量训练');
  const [knowledgeItems, setKnowledgeItems] = useState<FitnessKnowledge[]>(fitnessKnowledgeData);
  const navigate = useNavigate();

  // 获取所有分类
  const categories = ['全部', ...Array.from(new Set(fitnessKnowledgeData.map(item => item.category)))];

  // 过滤知识点
  const filteredKnowledge = knowledgeItems.filter(item => {
    const matchesSearch = item.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
                         item.content.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory = activeCategory === '全部' || item.category === activeCategory;
    return matchesSearch && matchesCategory;
  });

  // 处理点赞
  const handleLike = (id: string) => {
    setKnowledgeItems(prevItems => 
      prevItems.map(item => 
        item.id === id 
          ? { 
              ...item, 
              isLiked: !item.isLiked, 
              likes: item.isLiked ? item.likes - 1 : item.likes + 1 
            } 
          : item
      )
    );
  };

  // 处理收藏
  const handleSave = (id: string) => {
    setKnowledgeItems(prevItems => 
      prevItems.map(item => 
        item.id === id ? { ...item, isSaved: !item.isSaved } : item
      )
    );
  };

  // 处理分享
  const handleShare = () => {
    toast.info('分享功能即将上线');
  };

  // 处理点击帖子进入详情页
  const handlePostClick = (id: string) => {
    navigate(`/knowledge/${id}`);
  };

  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md">
        <div className="container mx-auto px-4 py-4 flex items-center">
          <button 
            onClick={() => navigate(-1)} 
            className="mr-4 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent">
            健身知识分享
          </h1>
        </div>
      </header>

      <main className="flex-grow">
        {/* 搜索和分类筛选 */}
        <section className="py-6 px-4 bg-slate-50 dark:bg-slate-800/50">
          <div className="container mx-auto max-w-6xl">
            <div className="flex flex-col md:flex-row gap-4">
              <div className="relative flex-grow">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" size={18} />
                <input
                  type="text"
                  placeholder="搜索健身知识点..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full pl-10 pr-4 py-3 rounded-full bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400"
                />
              </div>
              <div className="flex md:w-auto w-full">
                <div className="relative flex-grow md:flex-grow-0 md:w-64">
                  <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" size={18} />
                  <select
                    value={activeCategory}
                    onChange={(e) => setActiveCategory(e.target.value)}
                    className="w-full pl-10 pr-10 py-3 rounded-full bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 appearance-none focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400"
                  >
                    {categories.map((category) => (
                      <option key={category} value={category}>{category}</option>
                    ))}
                  </select>
                  <div className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
                    <i className="fa-solid fa-chevron-down text-slate-400 text-xs"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 知识点列表 */}
        <section className="py-8">
          <div className="container mx-auto max-w-6xl px-4">
            {filteredKnowledge.length === 0 ? (
              <div className="text-center py-16">
                <div className="w-20 h-20 mx-auto rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-4">
                  <Search size={32} className="text-slate-400" />
                </div>
                <h3 className="text-xl font-semibold mb-2">未找到相关内容</h3>
                <p className="text-slate-500 dark:text-slate-400">
                  请尝试使用其他关键词或浏览所有分类
                </p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredKnowledge.filter(item => item.category !== '哲学').map((item) => (
                  <div 
                    key={item.id}
                    className="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer"
                    onClick={() => handlePostClick(item.id)}
                  >
                    {/* 封面图 */}
                    <div className="relative overflow-hidden">
                      <img 
                        src={item.coverImage} 
                        alt={item.title}
                        className="w-full h-48 object-cover transition-transform duration-700 hover:scale-105"
                      />
                      <div className="absolute top-3 left-3">
                        <span className="bg-purple-600 text-white text-xs font-medium px-2 py-1 rounded-full">
                          {item.category}
                        </span>
                      </div>
                    </div>
                    
                    {/* 内容 */}
                    <div className="p-5">
                      {/* 作者信息 */}
                      <div className="flex items-center mb-4">
                        <img 
                          src={item.authorAvatar} 
                          alt={item.author}className="w-8 h-8 rounded-full object-cover mr-2"
                        />
                        <span className="text-sm text-slate-600 dark:text-slate-300">{item.author}</span>
                        <span className="mx-2 text-slate-300 dark:text-slate-600">•</span>
                        <span className="text-xs text-slate-500 dark:text-slate-400">{item.publishDate}</span>
                      </div>
                      
                      {/* 标题 */}
                      <h3 className="text-lg font-semibold mb-3 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
                        {item.title}
                      </h3>
                      
                      {/* 简短内容 */}
                      <p className="text-slate-600 dark:text-slate-300 text-sm mb-4 line-clamp-2">
                        {item.content}
                      </p>
                      
                      {/* 核心要点预览 */}
                      <div className="mt-2 mb-4">
                        <h4 className="text-xs font-medium text-purple-600 dark:text-purple-400 mb-2">核心要点</h4>
                        <div className="flex flex-wrap gap-1">
                          {item.keyPoints.slice(0, 3).map((point, index) => (
                            <span key={index} className="px-2 py-1 text-xs rounded-full bg-purple-50 dark:bg-purple-900/30 text-slate-700 dark:text-slate-300 line-clamp-1">
                              {point.length > 15 ? `${point.substring(0, 15)}...` : point}
                            </span>
                          ))}
                        </div>
                      </div>
                      
                      {/* 互动栏 */}
                      <div className="flex items-center justify-between mt-4 pt-4 border-t border-slate-100 dark:border-slate-700">
                        <div className="flex items-center text-sm text-slate-500 dark:text-slate-400">
                          <div className="flex items-center mr-4">
                            <Clock size={14} className="mr-1" />
                            <span>{item.readTime}</span>
                          </div>
                        </div>
                        <div className="flex items-center gap-3">
                          <button 
                            onClick={(e) => {
                              e.stopPropagation();
                              handleLike(item.id);
                            }}
                            className={`flex items-center text-sm ${item.isLiked ? 'text-red-500' : 'text-slate-500 dark:text-slate-400'}`}
                          >
                            <Heart size={16} className={`mr-1 ${item.isLiked ? 'fill-red-500' : ''}`} />
                            <span>{item.likes}</span>
                          </button>
                          <button 
                            onClick={(e) => {
                              e.stopPropagation();
                            }}
                            className="text-sm text-slate-500 dark:text-slate-400"
                          >
                            <MessageCircle size={16} className="mr-1" />
                            <span>{item.comments}</span>
                          </button>
                          <button 
                            onClick={(e) => {
                              e.stopPropagation();
                              handleSave(item.id);
                            }}
                            className={`text-sm ${item.isSaved ? 'text-purple-500' : 'text-slate-500 dark:text-slate-400'}`}
                          >
                            <Bookmark size={16} className={item.isSaved ? 'fill-purple-500' : ''} />
                          </button>
                          <button 
                            onClick={(e) => {
                              e.stopPropagation();
                              handleShare();
                            }}
                            className="text-sm text-slate-500 dark:text-slate-400"
                          >
                            <Share2 size={16} />
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </section>
        
        {/* 健身小贴士 */}
        <section className="py-12 bg-gradient-to-r from-purple-500 to-pink-500 text-white">
          <div className="container mx-auto max-w-6xl px-4">
            <div className="text-center mb-10">
              <h2 className="text-2xl md:text-3xl font-bold mb-4">健身小贴士</h2>
              <p className="text-white/80 max-w-2xl mx-auto">
                这些核心知识点可以帮助你在健身道路上少走弯路，科学健身，健康生活
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
                <div className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mb-4">
                  <Award size={24} />
                </div>
                <h3 className="text-xl font-semibold mb-2">循序渐进</h3>
                <p className="text-white/80 text-sm">
                  健身是一个长期的过程，不要急于求成，逐渐增加训练强度和重量，给身体足够的适应时间。
                </p>
              </div>
              
              <div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
                <div className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mb-4">
                  <Book size={24} />
                </div>
                <h3 className="text-xl font-semibold mb-2">学习动作标准</h3>
                <p className="text-white/80 text-sm">
                  正确的动作姿势比大重量更重要，不仅能提高训练效果，还能避免受伤，延长健身寿命。
                </p>
              </div>
              
              <div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
                <div className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mb-4">
                  <Heart size={24} />
                </div>
                <h3 className="text-xl font-semibold mb-2">倾听身体信号</h3>
                <p className="text-white/80 text-sm">
                  健身过程中如果出现持续疼痛，应立即停止训练并咨询专业人士，不要硬撑。
                </p>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="bg-slate-900 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-400 text-sm">
            © {new Date().getFullYear()} FitMaster 健身知识分享 | 专业健身知识教学平台
          </p>
        </div>
      </footer>
    </div>
  );
}